<template>
  <!-- 枪实时情况 -->
  <div class="gunRealTime">
    <div class="cardTitle">
      枪实时情况
      <a-icon type="link" class="linkIcon" />
    </div>
    <div class="chartContent">
      <div ref="chartRef" class="chartContainer" />
      <div class="numberContent">
        <div
          class="numberItem"
          v-for="(item, idx) in ringConfigs"
          :key="idx"
          :style="{ color: item.borderColor }"
        >
          {{ item.value }}个
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
const props = defineProps({
  gunRealTimeNum: {
    type: Object,
    default: () => ({}),
  },
});
watch(
  () => props.gunRealTimeNum,
  async (newVal) => {
    if (newVal && newVal.gunRealTimeStatistics) {
      const stats = newVal.gunRealTimeStatistics;
      const totalGunNum = stats.totalGunNum || 0;
      const valueKeys = [
        "totalGunNum", // 充电枪总数
        "chargingGunNum", // 充电中
        "offlineGunNum", // 待机中
        "onlineGunNum", // 在线中
        "badGunNum", // 故障中
      ];
      ringConfigs.value.forEach((config, index) => {
        config.total = totalGunNum;
        config.value = stats[valueKeys[index]] || 0;
      });
      initChart();
    }
  }
);
const chartRef = ref(null);
let gunRingChart = null;

// 定义环形图配置数据
const ringConfigs = ref([
  {
    name: "充电枪总数",
    radius: [140, 141],
    borderColor: "#1df9fc",
    value: 0,
    total: 0,
  },
  {
    name: "充电中",
    radius: [120, 121],
    borderColor: "#1d68f2",
    value: 0,
    total: 0,
  },
  {
    name: "待机中",
    radius: [100, 101],
    borderColor: "#6e69f8",
    value: 0,
    total: 0,
  },
  {
    name: "在线中",
    radius: [80, 81],
    borderColor: "#02b7ee",
    value: 0,
    total: 0,
  },
  {
    name: "故障中",
    radius: [60, 61],
    borderColor: "#fdd62f",
    value: 0,
    total: 0,
  },
]);

const borderWidth = ref(8); // 环图宽度

// 生成单个环形图的配置
const generateRingConfig = ({ name, radius, borderColor, value, total }) => ({
  name,
  type: "pie",
  clockWise: true,
  hoverAnimation: true,
  radius,
  startAngle: -360,
  endAngle: -270,
  label: {
    show: false,
  },
  labelLine: {
    show: false, // 不显示引导线
  },
  itemStyle: {
    borderWidth: borderWidth.value,
    shadowBlur: 40,
    borderColor,
    shadowColor: "rgba(0, 0, 0, 0)",
  },
  data: [
    {
      value: total - value,
      name: "",
      label: { show: false },
      labelLine: { show: false },
      itemStyle: {
        color: "#33404e",
        borderColor: "#33404e",
        borderWidth: borderWidth.value,
      },
      emphasis: { disabled: true },
    },
    {
      value,
      name: "",
    },
  ],
});

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return;

  gunRingChart = echarts.init(chartRef.value);

  const option = {
    series: ringConfigs.value.map(generateRingConfig),
  };

  gunRingChart.setOption(option);
};

const handleResize = () => {
  if (gunRingChart) {
    gunRingChart.resize();
  }
};

onMounted(() => {
  // initChart();
  window.addEventListener("resize", handleResize);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);
  if (gunRingChart) {
    gunRingChart.dispose();
    gunRingChart = null;
  }
});
</script>

<style lang="less" scoped>
.chartContainer {
  width: 100%;
  height: 350px;
}

.cardTitle {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 50px;
  color: #fff;
  border-left: 4px solid #4e83fd;
  padding-left: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .linkIcon {
    font-size: 14px;
    color: #4e83fd;
    cursor: pointer;
  }
}
.chartContent {
  position: relative;
  height: 100%;
  .numberContent {
    position: absolute;
    color: #fff;
    top: 6.8%;
    left: 53%;
    .numberItem {
      font-size: 14px;
      margin-bottom: 4px;
    }
  }
}
@media (max-width: 1500px) {
  .cardTitle {
    margin-bottom: 20px;
  }
}
</style>